/*
 * @Author: 飞越疯人院 353362604@qq.com
 * @Date: 2022-11-29 09:51:08
 * @LastEditors: 飞越疯人院 353362604@qq.com
 * @LastEditTime: 2022-12-12 11:05:21
 * @FilePath: \AdminStration\src\Pages\Front\Common\Options\FileListBox.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

import { useBoolean } from 'ahooks'
import { useState } from 'react'
import { CommonSmallTitle } from '../Other/SmallTitle'
import { FileCabinetDetail } from './FileCabinet'

export const FileListBox = ({ className, title, flex, data }) => {
    const [FileState, { setTrue, setFalse }] = useBoolean(false)
    const [FileUuid, setFileUuid] = useState()
    return (
        <CommonSmallTitle className={className} title={title} flex={flex}>
            <div className="FileListBox">
                {data && data.length !== 0 ? (
                    data.map(({ uuid, title, time, icon }) => (
                        <div
                            className="ListBox"
                            key={uuid}
                            onClick={() => {
                                setFileUuid(uuid)
                                setTrue()
                            }}
                        >
                            <div>{icon}</div>
                            <div>{title}</div>
                            <div>{time}</div>
                        </div>
                    ))
                ) : (
                    <div></div>
                )}
            </div>

            {FileState && <FileCabinetDetail uuid={FileUuid} Off={setFalse} className={className} />}
        </CommonSmallTitle>
    )
}
